// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

//
//    Icons using font
//--------------------------------------
.font-face(
    @family-name: @icon-font-name,
    @font-path: @icon-font-path,
    @font-weight: normal,
    @font-style: normal
);

.icon-font(
    @_icon-font-content,
    @_icon-font: @icon-font,
    @_icon-font-size: @icon-font-size,
    @_icon-font-line-height: @icon-font-line-height,
    @_icon-font-color: @icon-font-color,
    @_icon-font-color-hover: @icon-font-color-hover,
    @_icon-font-color-active: @icon-font-color-active,
    @_icon-font-margin: @icon-font-margin,
    @_icon-font-vertical-align: @icon-font-vertical-align,
    @_icon-font-position: @icon-font-position,
    @_icon-font-text-hide: @icon-font-text-hide,
    @_icon-font-display: @icon-font-display
) when (@_icon-font-position = before) {
    .css(display, @_icon-font-display);
    text-decoration: none;
    ._icon-text-hide(@_icon-font-text-hide);

    &:before {
        ._icon-font(
            @_icon-font-content,
            @_icon-font,
            @_icon-font-size,
            @_icon-font-line-height,
            @_icon-font-color,
            @_icon-font-margin,
            @_icon-font-vertical-align
        );
    }
    &:hover {
        &:before {
            .css(color, @_icon-font-color-hover);
        }
    }
    &:active {
        &:before {
            .css(color, @_icon-font-color-active);
        }
    }
}

.icon-font(
    @_icon-font-content,
    @_icon-font: @icon-font,
    @_icon-font-size: @icon-font-size,
    @_icon-font-line-height: @icon-font-line-height,
    @_icon-font-color: @icon-font-color,
    @_icon-font-color-hover: @icon-font-color-hover,
    @_icon-font-color-active: @icon-font-color-active,
    @_icon-font-margin: @icon-font-margin,
    @_icon-font-vertical-align: @icon-font-vertical-align,
    @_icon-font-position: @icon-font-position,
    @_icon-font-text-hide: @icon-font-text-hide,
    @_icon-font-display: @icon-font-display
) when (@_icon-font-position = after) {
    .css(display, @_icon-font-display);
    text-decoration: none;
    ._icon-text-hide(@_icon-font-text-hide);
    &:after {
        ._icon-font(
            @_icon-font-content,
            @_icon-font,
            @_icon-font-size,
            @_icon-font-line-height,
            @_icon-font-color,
            @_icon-font-margin,
            @_icon-font-vertical-align
        );
    }
    &:hover {
        &:after {
            .css(color, @_icon-font-color-hover);
        }
    }
    &:active {
        &:after {
            .css(color, @_icon-font-color-active);
        }
    }
}

.icon-font-size(
    @_icon-font-size: @icon-font-size,
    @_icon-font-line-height: @icon-font-line-height,
    @_icon-font-position: @icon-font-position
) when (@_icon-font-position = before) {
    &:before {
        ._icon-font-size(@_icon-font-size, @_icon-font-line-height);
    }
}

.icon-font-size(
    @_icon-font-size: @icon-font-size,
    @_icon-font-line-height: @icon-font-line-height,
    @_icon-font-position: @icon-font-position
) when (@_icon-font-position = after) {
    &:after {
        ._icon-font-size(@_icon-font-size, @_icon-font-line-height);
    }
}


.icon-font-symbol(
    @_icon-font-content,
    @_icon-font-position: @icon-font-position
) when (@_icon-font-position = before) {
    &:before {
        .css(content, @_icon-font-content);
    }
}

.icon-font-symbol(
    @_icon-font-content,
    @_icon-font-position: @icon-font-position
) when (@_icon-font-position = after) {
    &:after {
        .css(content, @_icon-font-content);
    }
}

//
//    Icons using image or sprite
//--------------------------------------
.icon-image(
    @_icon-image,
    @_icon-image-width: @icon-width,
    @_icon-image-height: @icon-height,
    @_icon-image-margin: @icon-margin,
    @_icon-image-vertical-align: @icon-vertical-align,
    @_icon-image-position-x: @icon-image-position-x,
    @_icon-image-position-y: @icon-image-position-y,
    @_icon-image-position: @icon-position,
    @_icon-image-text-hide: @icon-text-hide
) when (@_icon-image-position = before) {
    display: inline-block;
    ._icon-text-hide(@_icon-image-text-hide);
    &:before {
        ._icon-image(
            @_icon-image,
            @_icon-image-width,
            @_icon-image-height,
            @_icon-image-margin,
            @_icon-image-vertical-align,
            @_icon-image-position-x,
            @_icon-image-position-y
        );
        .css(margin, @_icon-image-margin);
    }
}

.icon-image(
    @_icon-image,
    @_icon-image-width: @icon-width,
    @_icon-image-height: @icon-height,
    @_icon-image-margin: @icon-margin,
    @_icon-image-vertical-align: @icon-vertical-align,
    @_icon-image-position-x: @icon-image-position-x,
    @_icon-image-position-y: @icon-image-position-y,
    @_icon-image-position: @icon-position,
    @_icon-image-text-hide: @icon-text-hide
) when (@_icon-image-position = after) {
    display: inline-block;
    ._icon-text-hide(@_icon-image-text-hide);
    &:after {
        ._icon-image(
            @_icon-image,
            @_icon-image-width,
            @_icon-image-height,
            @_icon-image-margin,
            @_icon-image-vertical-align,
            @_icon-image-position-x,
            @_icon-image-position-y
        );
        .css(margin, @_icon-image-margin);
    }
}

.icon-image-position(
    @_icon-image-position-x: @icon-image-position-x,
    @_icon-image-position-y: @icon-image-position-y,
    @_icon-image-position: @icon-position
) when (@_icon-image-position = before) {
    &:before {
        ._icon-image-position(
            @_icon-image-position-x,
            @_icon-image-position-y
        );
    }
}

.icon-image-position(
    @_icon-image-position-x: @icon-image-position-x,
    @_icon-image-position-y: @icon-image-position-y,
    @_icon-image-position: @icon-position
) when (@_icon-image-position = after) {
    &:after {
        ._icon-image-position(
            @_icon-image-position-x,
            @_icon-image-position-y
        );
    }
}

.icon-sprite-position(
    @_icon-sprite-position-x: @icon-sprite-position-x,
    @_icon-sprite-position-y: @icon-sprite-position-y,
    @_icon-sprite-grid: @icon-sprite-grid,
    @_icon-sprite-position: @icon-position
) when (@_icon-sprite-position = before) {
    &:before {
        ._icon-sprite-position(
            @_icon-sprite-position-x,
            @_icon-sprite-position-y,
            @_icon-sprite-grid
        );
    }
}

.icon-sprite-position(
    @_icon-sprite-position-x: @icon-sprite-position-x,
    @_icon-sprite-position-y: @icon-sprite-position-y,
    @_icon-sprite-grid: @icon-sprite-grid,
    @_icon-sprite-position: @icon-position
) when (@_icon-sprite-position = after) {
    &:after {
        ._icon-sprite-position(
            @_icon-sprite-position-x,
            @_icon-sprite-position-y,
            @_icon-sprite-grid
        );
    }
}

.icon-image-size(
    @_icon-image-width: @icon-width,
    @_icon-image-height: @icon-height,
    @_icon-image-position: @icon-position
) when (@_icon-image-position = before) {
    &:before {
        ._icon-image-size(@_icon-image-width, @_icon-image-height);
    }
}

.icon-image-size(
    @_icon-image-width: @icon-width,
    @_icon-image-height: @icon-height,
    @_icon-image-position: @icon-position
) when (@_icon-image-position = before) {
    &:after {
        ._icon-image-size(@_icon-image-width, @_icon-image-height);
    }
}

.icon-text-hide() {
    > span {
        .visually-hidden();
    }
}

//
//    Internal use mixins
//--------------------------------------
._icon-text-hide(@_icon-text-hide) when (@_icon-text-hide = true) {
    .icon-text-hide();
}

._icon-image(
    @_icon-image,
    @_icon-image-width,
    @_icon-image-height,
    @_icon-image-margin,
    @_icon-image-vertical-align,
    @_icon-image-position-x,
    @_icon-image-position-y
) {
    content: '';
    display: inline-block;
    ._icon-image-size(
        @_icon-image-width,
        @_icon-image-height
    );
    .css(line-height, @_icon-image-height);
    .css(vertical-align, @_icon-image-vertical-align);
    background-image: url(@_icon-image);
    background-position: @_icon-image-position-x @_icon-image-position-y;
    background-repeat: no-repeat;
    .css(margin, @_icon-image-margin);
}

._icon-image-position(
    @_icon-image-position-x,
    @_icon-image-position-y
) {
    background-position: @_icon-image-position-x @_icon-image-position-y;
}

._icon-image-size(
    @icon-width,
    @icon-height
) {
    .css(width, @icon-width);
    .css(height, @icon-height);
}

._icon-sprite-position(
    @_icon-sprite-position-x,
    @_icon-sprite-position-y,
    @_icon-sprite-grid
) {
    background-position: -(@_icon-sprite-position-x*@_icon-sprite-grid) -(@_icon-sprite-position-y*@_icon-sprite-grid);
}

._icon-font(
    @_icon-font-content,
    @_icon-font,
    @_icon-font-size,
    @_icon-font-line-height,
    @_icon-font-color,
    @_icon-font-margin,
    @_icon-font-vertical-align
) {
    .css(font-family, @_icon-font);
    .css(content, @_icon-font-content);
    ._icon-font-size(@_icon-font-size, @_icon-font-line-height);
    .css(color, @_icon-font-color);
    overflow: hidden;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    .css(vertical-align, @_icon-font-vertical-align);
    text-align: center;
    .css(margin, @_icon-font-margin);
}

._icon-font-size(@_icon-font-size, @_icon-font-line-height) {
    .css(font-size, @_icon-font-size);
    .css(line-height, @_icon-font-line-height);
}
